<template>
  <div class="tail-box">
    <div class="context">
      {{place}}
    </div>
    <em></em>
    <span></span>
  </div>
</template>

<script>
export default {
  props: {
    place: {
      type: String,
      require: true
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .tail-box
    width 64px
    line-height 32px
    background rgba(224,40,40,0);
    border 1px solid rgba(224, 40, 40, 1);
    border-radius 4px; 
    text-align center
    position relative
    box-sizing border-box
    @media screen and (max-width 750px)
      width 45px
      height 24px
      line-height 24px
      display flex 
      align-items center 
      justify-content center
    em
      position: absolute;
      width: 0px;
      height: 0px;
      border: 5px dashed #808080;
      border-color: transparent transparent transparent $color-theme-red; 
      top: 50%;
      transform translateY(-50%)
      right: -10px;
    span
      position: absolute;
      width: 0px;
      height: 0px;
      border: 5px dashed #808080;
      border-color: transparent transparent transparent #faf8f8; 
      right: -8px;
      top: 50%;
      transform translateY(-50%)
    .context
      font-size 14px
      font-family MicrosoftYaHei-Bold
      font-weight bold
      color rgba(224,40,40,1)
  
</style>